<template>
	<view>
		<uni-table stripe emptyText="暂无更多数据">
			<!-- 表头行 -->
			<uni-tr>
				<uni-th align="center" v-for="(item,index) in thList" :key="index" :align="item.align"
					:width="item.width">{{item.name}}</uni-th>
				<!-- 				<uni-th align="center">今日已复习</uni-th>
				<uni-th align="center">剩余需复习量</uni-th>
				<uni-th align="center" width="100">操作</uni-th> -->
			</uni-tr>
			<uni-tr>
				<uni-td align="center">
					<view class="first-title">
						词汇
					</view>
				</uni-td>
				<uni-td align="center">
					<view class="second-title">
						2.情态动词的特征
					</view>
				</uni-td>
				<uni-td align="center">北京市海淀区</uni-td>
				<uni-td align="center" v-if="showHandle">
					<button class="review-btn">复习</button>
				</uni-td>
			</uni-tr>
			<uni-tr>
				<uni-td align="center">2020-10-21</uni-td>
				<uni-td align="center">HanMeiMei</uni-td>
				<uni-td align="center">北京市海淀区</uni-td>
				<uni-td align="center">
					<button class="review-btn">复习</button>
				</uni-td>
			</uni-tr>
			<uni-tr>
				<uni-td align="center">2020-10-21</uni-td>
				<uni-td align="center">HanMeiMei</uni-td>
				<uni-td align="center">北京市海淀区</uni-td>
				<uni-td align="center">
					<button class="review-btn">复习</button>
				</uni-td>
			</uni-tr>
			<uni-tr>
				<uni-td align="center">2020-10-21</uni-td>
				<uni-td align="center">HanMeiMei</uni-td>
				<uni-td align="center">北京市海淀区</uni-td>
				<uni-td align="center">
					<button class="review-btn">复习</button>
				</uni-td>
			</uni-tr>
		</uni-table>
	</view>
</template>

<script>
	export default {
		props: {
			thList: {
				type: Array,
				default: []
			},
			showHandle: true
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.uni-table-tr:first-child {
		// background-color: #9CA6BF;



	}

	//奇数行第一个单元格
	.uni-table .uni-table-tr:nth-child(odd) {
		background-color: #9CA6BF;
		border: 1px solid #0000 !important;
		 
	}

	.table--stripe .uni-table-tr:nth-child(2n + 3) {
		background-color: #DFD6D7;
	}

	 

	.uni-table-th {
		color: #000;
		font-weight: bolder;
		font-size: px_2_vw(30);
	}

	::v-deep .uni-table {
		border-radius: 50px !important;
	}

	.review-btn {
		width: px_2_vw(104);
		height: px_2_vw(53);
		background: #FF8635;
		font-size: px_2_vw(30);
		color: #fff;
		padding: 0 !important;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 41rpx;
	}

	.first-title {
		font-size: px_2_vw(30);
		font-weight: bold;
		color: #000;
	}

	.second-title {
		color: #000;
		font-size: px_2_vw(20);
	}
</style>